@import url("http://twitter.github.com/bootstrap/assets/css/bootstrap.css");

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body{
	padding: 0;
	margin: 0;
	font: 13px/18px "Lucida Grande", Tahoma, Verdana, sans-serif;
	color: #404040;
	background: #ecedef;
}

.clear{clear:both;}


/************ CONTENT PRINCIPAL **************/
.content{
	max-width: 990px;
	min-width: 220px;
	width: 100%;
	margin: 0 auto;
}

#header{
	background: #3d4144 0 0 repeat;
	border-bottom: 5px solid #ddd;
}
	
	#nav{
	  height: 36px;
	  background: #464b4c;
	  border-top: 1px solid #353939;
	  border-bottom: 1px solid #2e3131;
	  background-image: -webkit-linear-gradient(top, #464b4c, #3f4344);
	  background-image: -moz-linear-gradient(top, #464b4c, #3f4344);
	  background-image: -o-linear-gradient(top, #464b4c, #3f4344);
	  background-image: linear-gradient(to bottom, #464b4c, #3f4344);
	  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
	  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
	  overflow: hidden;
	}

#body{
	background: white;
	margin-top: 10px;
	margin-bottom: 10px;

	border-radius: 10px;
	box-shadow: 0px 0px 3px 0px #bbb;
}

#footer{
	background: #323637;
}


/************ HEADER **************/
#header-left{
	float: left;
	width: 50%;
}

#header-right{
	float: left;
	width: 50%;
}

#quote{
	width: 100%;
	font-size:1.75em;
padding: 10px;
box-sizing: border-box;

}


/************ NAV **************/
#nav a {
  -webkit-transition: 0.1s ease-out;
  -moz-transition: 0.1s ease-out;
  -o-transition: 0.1s ease-out;
  transition: 0.1s ease-out;
  -webkit-transition-property: background-color, line-height;
  -moz-transition-property: background-color, line-height;
  -o-transition-property: background-color, line-height;
  transition-property: background-color, line-height;

}
#nav ul {
  margin: 0 auto;
  border-left: 1px solid #353939;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid #4d5354;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
#nav li {
  float: left;
}
#nav a {
  display: block;
  padding: 0 20px;
  line-height: 36px;
  color: #ddd;
  text-decoration: none;
  text-shadow: 0 -1px #2e3131;
  border-left: 1px solid #4d5354;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  border-right: 1px solid #353939;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
#nav a:hover {
  background: #4d5354;
  background: rgba(255, 255, 255, 0.05);
}
#nav li.active a, #nav li.active a:hover, #nav a:active {
  padding: 0 21px;
  line-height: 33px;
  color: #eee;
  background: #323637;
  border-left: 0;
  border-right: 0;
  border-bottom: 3px solid #48a9c0;
  background-image: -webkit-linear-gradient(top, #484e4f, #323637);
  background-image: -moz-linear-gradient(top, #484e4f, #323637);
  background-image: -o-linear-gradient(top, #484e4f, #323637);
  background-image: linear-gradient(to bottom, #484e4f, #323637);
  -webkit-box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
}
#nav li.green a, #nav li.green a:active {
  border-bottom-color: #56c93d;
}
#nav li.red a, #nav li.red a:active {
  border-bottom-color: #a54e49;
}
#nav li.purple a, #nav li.purple a:active {
  border-bottom-color: #c052b9;
}
#nav li.yellow a, #nav li.yellow a:active {
  border-bottom-color: #c0bb30;
}



/************ BODY **************/
#body-left{
	width: 65%;
	float: left;
}

	.video-content{
		background: #F9F9F7;
		border-radius: 10px;
		width: 85%;
		margin: 20px auto;
		overflow: hidden;
		border: 1px dashed #ccc;
		padding: 10px;
	}

	.video-title{
		width: 100%;
		padding-bottom: 10px;
		text-align: center;
	}
	.video-title a{
		text-transform: uppercase;
		color: #4885EA;
		font-weight: bold;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 140%;
		text-decoration: none;
		text-shadow: 1px 1px 1px #aaa;
	}

	.video-video{
		width: 40%;
		float: left;
	}
	.video-description{
		width: 60%;
		float: left;
	}
	.video-description p{
		color: #5c5c5c;
		font-family: arial;
	}
	.video-description a{
		text-decoration: none;
		float: right;
		color: #4885EA;
		padding: 10px;
	}
	.video-description a:hover{
		text-decoration: underline;
		color: #12A5EB;
	}
		.video-redes{

		}

	.video-details{
		width: 100%;
	}
		.video-details span{
			color: #7A1405;
			font-weight: bold;
		}

#body-right{
	width: 35%;
	float: left;
}



/************ FOOTER **************/





/*********** TABLETS **********/
@media screen and (max-width: 800px){

}



/*********** SMARTPHONES *******/
@media screen and (max-width: 480px){
	#header-left{
		width: 100%;
		background: yellow;
	}

	#header-right{
		width: 100%;
		background: white;
	}

	#body-left{
		width: 100%;
	}

	#body-right{
		width: 100%;
	}

}
.video{width: 300px;margin: 5px;display: inline-block;vertical-align: top;background-color: whiteSmoke;padding: 5px; box-sizing:border-box;box-shadow: 0px 0px 10px rgba(0,0,0,0.1) inset, 0px 0px 2px rgba(0,0,0,0.7);}
.play{position:relative;}
.play .button{position:absolute;left:50%;top:50%;width:48px;height:48px;margin-left:-24px;margin-top:-24px;}
.video .description{font-size: 0.75em; text-align: justify;}
.video .title{display: block; padding: 2px 5px; text-decoration: none; background-color: #333; color: #fff; font-size:1em; height:1.25em; overflow: hidden;}
.video a, .video a:active, .video a:hover{color: inherit;text-decoration:none}
.videoInner{width: 580px; padding: 10px; margin: 10px auto; background-color: #333; color: #fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.1) inset, 0px 0px 2px rgba(0,0,0,0.7);}
.wau{width: 80px; margin: 0 auto;}


.commentsWrapper{width: 550px; margin: 10px auto;}
.opti{display: none;}
.videoWrapper{width: 625px; margin: 0; background-color: #fff; box-shadow: 0px 0px 2px rgba(0,0,0,0.9), 0px 0px 10px rgba(0,0,0,0.2);display: inline-block; vertical-align: top;}
.videoWrapper.sidebar{width: 305px;margin-right: 20px;}
.wrapper.duo{width: 955px; margin: 10px auto;}
.wrapper.mono{width: 625px; margin: 10px auto;}
.sidebar .video{width: 140px; margin: 5px;}
.sidebar .play .button, .sidebar .title{display: none;}
.sidebar iframe.feat{width: 250px; box-shadow: 0px 0px 2px rgba(0,0,0,0.9);overflow:hidden; height: 250px; border: none;}
.sidebar div.feat{width: 250px; margin: 5px auto;}
.topBar .social{float: right;/*background-color: #fff; border-radius:5px; padding: 5px; box-shadow: 0px 0px 2px rgba(0,0,0,0.9);*/}
.topBar{padding: 10px; font-size: 1em;}
.loader{background-image: url(loader.gif); width: 66px; height: 66px; display: inline-block; background-color: #fff; padding: 5px; border-radius:5px;background-repeat: no-repeat; background-position: center;}
#loading{margin: 0; width: auto; font-size: 1.5em; line-height: 1.75em;}
iframe.feat{width: 468px; box-shadow: 0px 0px 2px rgba(0,0,0,0.9);overflow:hidden; height: 60px; border: none;}
div.feat{width: 468px; margin: 5px auto;}